<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>帮助</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            width: 100%;
            background-color: #fff;
            font-size: 0.28rem;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: Helvetica;
            color: #333333;
        }

        .hideNews {
            display: none
        }

        .head_title {
            background-color: white;
            height: 0.88rem;
            font-size: 0.36rem;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            -webkit-justify-content: center;
            align-items: center;
            -webkit-align-items: center;
            border-bottom: 0.01rem solid #e5e5e5;
        }

        .hot-question {
            height: 0.7rem;
            font-size: 0.26rem;
            line-height: 0.7rem;
            padding-left: 0.28rem;
            color: #999999;
        }

        .messager-question {
            height: 2.9rem;
            padding: 0.26rem;
            background-color: white;
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
            align-content: center;
            -webkit-algin-content: center;
        }

        .messager-info {
            display: inline-block;
            width: 3.34rem;
            height: 1rem;
            background-color: #577af7;
            border-radius: 0.15rem 0.15rem 0 0.15rem;
            font-size: 0.3rem;
            color: white;
            text-align: center;
            line-height: 1rem;
        }

        .messager-infos {
            display: inline-block;
            width: 3.34rem;
            height: 1rem;
            background-color: #577af7;
            border-radius: 0.15rem 0.15rem 0.15rem 0;
            font-size: 0.3rem;
            color: white;
            text-align: center;
            line-height: 1rem;
        }

        .messager-infoss {
            display: inline-block;
            width: 3.34rem;
            height: 1rem;
            background-color: #577af7;
            border-radius: 0.15rem 0 0.15rem 0.15rem;
            margin-top: 0.32rem;
            font-size: 0.3rem;
            color: white;
            text-align: center;
            line-height: 1rem;
        }

        .messager-infosss {
            display: inline-block;
            width: 3.34rem;
            height: 1rem;
            background-color: #577af7;
            margin-top: 0.32rem;
            border-radius: 0 0.15rem 0.15rem 0.15rem;
            font-size: 0.3rem;
            color: white;
            text-align: center;
            line-height: 1rem;
        }

        .list {
            height: 4.26rem;
        }

        .list ul {
            padding-left: 0.26rem;
        }

        .list ul li {
            background-color: white;
            padding-right: 0.26rem;
            height: 0.88rem;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
            border-bottom: 0.01rem solid #e5e5e5;
        }

        .list ul li img {
            width: 0.18rem;
            height: 0.33rem;
        }

        .opinionsa {
            width: 100%;
            height: 0.86rem;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
            /* border-top: 0.01rem solid #e5e5e5 */
        }

        .opinions {
            width: 100%;
            height: 0.86rem;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
            border-bottom: 0.01rem solid #e5e5e5;
        }

        * {
            font-size: 0.28rem;
        }
    </style>
</head>

<body>
    <div class="list">
        <ul id="list_ul"></ul>
    </div>
</body>

</html>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/dotmin.js"></script>
<script id="list" type="text/html">
    {{~it:value:index}}
    <li data-title="{{=value.title}}" data-id="{{=value.id}}" data-url="{{=value.url}}" data-content="{{=value.content}}">
        <div class="opinionsa">
            {{=value.title}}
            <img src="../../image/right_jintoux.png" style="width: 0.12rem;height: 0.22rem;">
        </div>
    </li>
    {{~}}
</script>
<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        var pageId = api.pageParam.listPageId;
        var listData = [];
        var curPage = 0;
        var total_page = 1;
        function bindClick() {
            $('#list_ul').on("click", "li", function () {
                var param = {
                    title: $(this).data("title"),
                    id: $(this).data("id"),
                    url: $(this).data("url")
                };
                app.openWin({
                    name: "helpListPage",
                    url: app.hd + "common/headerwin.html",
                    pageParam: {
                        subpage: param.url,
                        name: "helpListPage",
                        type: "remote",
                        isremote: "true",
                        title: param.title
                    }
                });
            })
        }

        function loadPage(curpage, morePage) {
            app.ajaxPro({
                url: "help/lists",
                values: {
                    page: curPage,
                    pageSize: 10,
                    catalog_id: pageId
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    listData = ret.data.data;
                    total_page = ret.total_page;
                    if (curPage < total_page) {
                        curPage++;
                    }
                    var temp = doT.template($("#list").text());
                    if (morePage == true) {
                        $("#list_ul").append(temp(listData));
                    } else {
                        $("#list_ul").html(temp(listData));
                    }
                    bindClick();
                }
            })
        }
        loadPage(0, false);
        app.toBottom(function () {
            if (curPage < total_page) {
                loadPage(curPage, true)
            }
        });
        app.downRefresh(function () {
            curPage = 0;
            loadPage(curPage, false);
        })
        app.headerMap();
    }
</script>